<template>
  <div class="page">
    <Button type="primary" @click="initLineChart">绘制</Button>
    <Button type="primary" @click="initChart">绘制2</Button>


    <div style="height:200px" id="chartDiv"></div>
    <div style="height:200px" id="container2"></div>

  </div>
  </div>
</template>

<script>
  import fetchUtil from '@/libs/fetch'
  import G2 from '@antv/g2'; //引入G2
  import {
    Chart
  } from "@antv/g2"; //或者只引入需要用到的G2组件，我要用Chart
  const DataSet = require(
    '@antv/data-set'); //antV中用DataSet作为数据集，可以对原始数据进行操作，比如格式转换之类的，以供图表方法使用，当然也可以不用，不管什么方法只要把数据格式转变成它需要的格式就可以了
  export default {

    data() {
      return {
        chartDataDouble: [{
            time: "周一",
            vs: 1234,
            vk: 124
          },
          {
            time: "周二",
            vs: 1245,
            vk: 364
          },
          {
            time: "周三",
            vs: 1456,
            vk: 428
          },
          {
            time: "周四",
            vs: 1526,
            vk: 523
          },
          {
            time: "周五",
            vs: 1548,
            vk: 92
          },
          {
            time: "周六",
            vs: 1798,
            vk: 242
          },
          {
            time: "周日",
            vs: 1723,
            vk: 131
          },
        ]
      }
    },
    created() {
      // fetch("http://192.168.101.14:8003/hmhn/services/SybHmhnWebService?wsdl", {
      //     method: 'post',
      //     // headers: {
      //     //   'Content-Type': 'application/json',
      //     // },
      //     body: '{"row":{"password":"world","username":"hello"}}'
      //   })
      //   .then(m => m.json())
      //   .then(json => {
      //     this.log = json.d;
      //   }).catch(err => {
      //     console.log(err)
      //   });

    var data = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:cxf="http://cxf.api.sinosig.medicare.sn.cdhc.com/"><soapenv:Header></soapenv:Header><soapenv:Body><cxf:invoke><body>&lt;body&gt;&lt;row&gt;&lt;username&gt;hello&lt;/username&gt;&lt;password&gt;world&lt;/password&gt;&lt;/row&gt;&lt;/body&gt;</body></cxf:invoke></soapenv:Body></soapenv:Envelope>';

      fetchUtil("http://192.168.101.14:8003/hmhn/services/SybHmhnWebService?wsdl", {
        "row": {
          "password": "world",
          "username": "hello"
        }
      }, 'GET').then((res) => {
        console.log("res:"+res);
      })


    },
    methods: {
      //图表
      initLineChart() {
        const chart = new Chart({ // 创建一个图表
          container: "chartDiv", // 容器是上面那个div
          autoFit: true, // 自适应
          height: 300 // 高度
        });

        const ds = new DataSet(); // 声明数据集 附官方文档 https://g2.antv.vision/zh/docs/manual/dataset/dataset
        const dv = ds.createView().source(this.chartDataDouble); // 使用上面的数据chartDataDouble创建数据视图dv
        // fold 方式完成了行列转换，如果不想使用 DataSet 直接手工转换数据即可 --官方注释
        dv.transform({ // 附transform API https://g2.antv.vision/zh/docs/manual/dataset/transform
          type: 'fold',
          fields: ['vs', 'vk'], // 展开字段集
          key: 'type', // key字段
          value: 'count' // value字段
        });
        // 以上的数据转换后一条转为两条，eg：
        // { time: "周一", vs: 1234, vk: 124 }, 转换后=>
        // { "time": "周一", "type": "vs", "count": 1234 },{ "time": "周一", "type": "vk", "count": 124 },

        chart.data(dv.rows); // 现在可以将dv的rows作为数据源
        chart.scale({ // 之前的chart.source()方法已经替换为chart.data()和chart.scale()
          time: {
            range: [0, 1] // 输出数据的范围，默认[ 0, 1 ]，格式为 [ min, max ]，min 和 max 均为 0 至 1 范围的数据 --官方
          }, // 简单来说就是 这个图标的多少用于显示数据[0,1]就是数据占满横坐标宽度,[0,0.5]就是还余下半个空的横坐标
          count: {
            min: 0, // 我的纵坐标count的最小值，不设置的话自动取数据中最小数的作为y=0的起始
            nice: true // 默认为 true，用于优化数值范围，使绘制的坐标轴刻度线均匀分布。例如原始数据的范围为 [3, 97]，如果 nice 为 true，那么就会将数值范围调整为 [0, 100] --官方
          },
        });
        chart.tooltip({
          showCrosshairs: true, // 展示 Tooltip 辅助线
          shared: true,
          crosshairs: {
            type: 'line'
          }
        });
        chart.axis('count', { // 坐标轴
          label: {
            formatter: function formatter(val) {
              return val; // 这里可以改坐标刻度的形式
            }
          }
        });
        chart.line().position('time*count').color('type').shape('smooth'); //方法都在官方
        chart.point().position('time*count').color('type').size(4).shape('circle').style({
          stroke: '#fff', // 描边
          lineWidth: 1 // 宽度
        });
        chart.render(); // 这个图表终于要被渲染展示了...
      },

      initChart() {
        const otherRatio = 6.67 / 100; // Other 的占比
        const otherOffsetAngle = otherRatio * Math.PI; // other 占的角度的一半
        const data = [{
            type: '微博',
            value: 93.33
          },
          {
            type: '其他',
            value: 6.67
          },
        ];
        const other = [{
            type: '论坛',
            value: 1.77
          },
          {
            type: '网站',
            value: 1.44
          },
          {
            type: '微信',
            value: 1.12
          },
          {
            type: '客户端',
            value: 1.05
          },
          {
            type: '新闻',
            value: 0.81
          },
          {
            type: '视频',
            value: 0.39
          },
          {
            type: '博客',
            value: 0.37
          },
          {
            type: '报刊',
            value: 0.17
          },
        ];
        const chart = new Chart({
          container: 'container2',
          autoFit: true,
          height: 500,
        });
        chart.legend(false);
        chart.tooltip({
          showMarkers: false,
        });

        const view1 = chart.createView({
          region: {
            start: {
              x: 0,
              y: 0,
            },
            end: {
              x: 0.5,
              y: 1,
            },
          },
        });
        view1.coordinate('theta', {
          radius: 0.7,
          startAngle: 0 + otherOffsetAngle,
          endAngle: Math.PI * 2 + otherOffsetAngle,
        });
        view1.data(data);
        view1.interaction('element-highlight');
        view1
          .interval()
          .adjust('stack')
          .position('value')
          .color('type', ['#38c060', '#2593fc'])
          .label('value', function () {
            return {
              offset: -10,
              content: (obj) => {
                return obj.type + '\n' + obj.value + '%';
              },
            };
          });

        const view2 = chart.createView({
          region: {
            start: {
              x: 0.5,
              y: 0.1,
            },
            end: {
              x: 1,
              y: 0.9,
            },
          },
        });
        view2.axis(false);
        view2.data(other);
        view2.interaction('element-highlight');
        view2
          .interval()
          .adjust('stack')
          .position('value')
          .color('type', ['#063d8a', '#0b53b0', '#1770d6', '#2593fc', '#47abfc', '#6dc1fc', '#94d6fd', '#bbe7fe'])
          .label('value', {
            position: 'right',
            offsetX: 5,
            offsetY: 10,
            content: (obj) => {
              return obj.type + ' ' + obj.value + '%';
            },
          });
        chart.render();
        this.drawLinkArea(chart, view1, view2, otherOffsetAngle);
        chart.on('afterpaint', res => {
          this.drawLinkArea(chart, view1, view2, otherOffsetAngle);
        });

      },

      drawLinkArea(chart, view1, view2, otherOffsetAngle) {
        const canvas = chart.getCanvas();
        const container = chart.backgroundGroup;
        const view1_coord = view1.getCoordinate();
        const center = view1_coord.getCenter();
        const radius = view1_coord.getRadius();
        const interval_geom = view2.geometries[0];
        const interval_container = interval_geom.container;
        const interval_bbox = interval_container.getBBox();
        const view2_coord = view2.getCoordinate();
        // area points
        const pie_start1 = {
          x: center.x + Math.cos(Math.PI * 2 - otherOffsetAngle) * radius,
          y: center.y + Math.sin(Math.PI * 2 - otherOffsetAngle) * radius,
        };
        const pie_start2 = {
          x: center.x + Math.cos(otherOffsetAngle) * radius,
          y: center.y + Math.sin(otherOffsetAngle) * radius,
        };
        const interval_end1 = {
          x: interval_bbox.minX,
          y: view2_coord.end.y,
        };
        const interval_end2 = {
          x: interval_bbox.minX,
          y: view2_coord.start.y,
        };
        const path = [
          ['M', pie_start1.x, pie_start1.y],
          ['L', pie_start2.x, pie_start2.y],
          ['L', interval_end2.x, interval_end2.y],
          ['L', interval_end1.x, interval_end1.y],
          ['Z'],
        ];
        container.addShape('path', {
          attrs: {
            path,
            fill: '#e9f4fe',
          },
        });
        canvas.draw();
      }
    }
  };
</script>
<style lang="less" scoped>
  .page {
    .page-content {
      .content {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;

        .card-content {
          display: flex;
          width: 100%;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          padding: 12px 36px;

          .name {
            font-size: 20px;
            margin-top: 12px;
          }
        }
      }
    }
  }
</style>